import React, { useCallback, useState } from "react"
import { View, Input } from "@tarojs/components"
import './index.scss'

// React.memo缓存组件
// useCallback缓存方法
// useMemo缓存值

const CallBackDemo:React.FC = () => {
    const [str, setStr] = useState('')
    // useCallback储存的是一个方法，useMemo储存的是一个计算值，两者逻辑差不多，应用的对象有区别
    // 采用useCallback可以避免inputChange方法在每次渲染的时候创建一次，第二个参数代表依赖项，用法与useEffect的相同,此处只有组件创建时才会创建一次inputChange方法
    const inputChange = useCallback((e: any) => {
        setStr(e.target.value)
    }, [])

    return(<View className="page">
        <Input value={str} onInput={inputChange} className="input"></Input>
        <View>输入值：{str}</View>
    </View>)
}

export default CallBackDemo